<template>
    <!-- 修改资料 -->

    <div>
        <!--  v-if="visible"  @click.self="handleClose" -->
        <!-- 内容主题区域 -->
        <el-form label-width="100px" :model="form" label-position="right" ref="formRef" :rules="formRules" disabled class="borderNone">
            <el-card>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="客户编号" prop="custNumber">
                            <el-input v-model="form.custNumber"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="客户名称" prop="custName">
                            <el-input v-model="form.custName" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="主题" prop="title">
                            <el-input v-model="form.title"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="联系人">
                            <el-input  v-model="form.custMan"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="联系电话">
                            <el-input  v-model="form.custPhone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="预计出发时间" prop="estimateStartDateTime">
                            <el-input v-model="form.estimateStartDateTime"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="预计结束时间" prop="estimateBackDateTime">
                            <el-input v-model="form.estimateBackDateTime"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="地址" prop="visitAddress">
                            <el-input v-model="form.visitAddress"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="预计费用" prop="forecastCost">
                            <el-input v-model="form.forecastCost"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="陪同人员" prop="accompaniedBy">
                            <el-input v-model="form.accompaniedBy"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="出差事由" prop="planContent">
                            <el-input v-model="form.planContent"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
        </el-form>
        <el-card style="margin-top: 20px;">
            <sc-title title="行程安排清单"></sc-title>
            <el-scrollbar height="200px">
                <el-form-item prop="column">
                    <ts-form-table v-model="dataList"   placeholder="暂无数据" disabled>
                        <template #tableContent>
                            <el-table-column prop="startDateTime" label="出发时间" width="200">
                            </el-table-column>
                            <el-table-column prop="origo" label="起点" width="200">
                            </el-table-column>
                            <el-table-column prop="destn" label="终点" width="200">
                            </el-table-column>
                            <el-table-column prop="transportName" label="交通工具" width="200">
                            </el-table-column>
                            <el-table-column prop="custId"  label="客户" width="200">
                            </el-table-column>
                            <el-table-column  prop="accompaniedBy" label="同行人员" width="220">
                            </el-table-column>
                            <el-table-column prop="planContent" label="摘要" width="200">
                            </el-table-column>
                        </template>
                    </ts-form-table>
                </el-form-item>
            </el-scrollbar>
        </el-card>

        <div v-if="!noButton" class="button-position" style="margin-top: 5px;">
            <el-button @click="updateVisible">取 消</el-button>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted, watch, toRefs } from 'vue';
import { ElNotification } from 'element-plus';
import Api from '@/api/model/trip'
import tsFormTable from '@/components/scFormTable/index.vue'
const emit = defineEmits(['updatetable'])
const props = defineProps({
    paramsData: {
        type: Object,
        defalut: {}
    },
    noButton:{type:Boolean,defalut:false}
})
// 添加用户数据的对象
const form = ref({})
const dataList = ref([])
onMounted(() => {
    getInit()
})
const getInit = async () => {
    let res = await Api.employeePlan.detailTravelPlanDtl.post(props.paramsData)
    if (res.code == '200') {
        form.value = res.data
        dataList.value = res.dtlList
    }

}
const updateVisible = (val) => {
    emit('updatetable')
}


</script>
<style lang="less" scoped>
.borderNone {
    :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        background-color: transparent; //背景颜色透明
        border-bottom: 1px solid #999;
        border-radius: 0;

        .el-input__inner {
            cursor: default !important;
        }
    }
}
</style>



